<template>
  <div class="detail">
    <NavHeader :title="poi_name"/>
    <div class="tab-bar">
      <a
        class="tab-item" @click="urlChange('/detailbook')" >{{detail_tabs[0].name}}
      </a>
      <a
        class="tab-item"   @click="urlChange('/detailevaluation')" >{{detail_tabs[1].name}}
      </a>
      <a
        class="tab-item active"  @click="urlChange('/detailaddress')" >{{detail_tabs[2].name}}
      </a>
    </div>
    <div class="restanurant-content">
      <div class="restanurant-basic">
        <div class="restanurant-tel res-section">{{item.call_center}}</div>
        <div class="restanurant-addr res-section">
          <div class="addr-wrap">
            <div class="addr-name">商家地址：</div>
            <div class="addr-text">{{item.address}}</div>
          </div>
        </div>
      </div>
      <div class="restanurant-basic">
        <p class="restanurant-send-time res-section">配送时间：{{item.shipping_time}}</p>
        <p class="restanurant-send-type res-section">配送服务：
          <span v-if="item.delivery_type === 1"> <span class="meituan-send">美团专送</span>提供高质量配送服务</span>
          <span v-else>商家配送</span>
        </p>
      </div>
      <div class="restanurant-basic">
        <p  v-for="dis in item.discounts2" class="restanurant-pay-type res-section"><img class="icon" :src=dis.icon_url />{{dis.info}}</p>
      </div>
    </div>
  </div>

</template>

<script>
  import { mapState } from 'vuex'
import  NavHeader from "@/components/common/NavHeader"
export default {
  components: {
    NavHeader
  },
  computed: {
    ...mapState(['poi_name','detail_tabs'])
  },
  methods:{
     urlChange(url){
        this.$router.push({ path: url, query: { id: this.$route.query.id}})
     }
  },
  async asyncData (context) {
    //请求后台数据 这里注意了参数必须使用config配置项 如果直接拼接字符串会有bug
    const { data } = await context.app.$axios.get("/app2/json/restanurant.json")
    return {item:data.data}
  },
}
</script>

<style lang="stylus" scoped>
  .tab-bar {
    font-size: (16px);
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    margin-top: (1.28rem);
    .tab-item {
      flex: 1;
      height: (0.9rem);
      line-height:(0.9rem);
      position: relative;
      color: #666;
      text-align: center;
      text-decoration: none;
      &.active {
        &:after {
          content: '';
          display: block;
          height: 0.08rem;
          width: 1.2rem;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          -webkit-transform: translateX(-50%);
          background-color: #ffd161;
        }
      }
    }
  }
  .restanurant-content {
    background-color: #f6f6f6;
    overflow: hidden;
    .restanurant-basic {
      color: #2f2f2f;
      background-color: #fff;
      font-size: (14px);
      margin-top: 0.2rem;
      padding-right: ( 0.2rem);
      padding-left: (0.3rem);
    }
    .res-section {
      padding-top: (0.3rem);
      padding-bottom: (0.3rem);
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      &:before {
        display: block;
        content: '';
        margin-right: (0.4rem);
        width: (0.32rem);
        height: (0.32rem);
        background-size: cover;
      }
    }
    .restanurant-tel::before {
      width: (0.38rem);
      background-image: url('/app2/img/tel.png');
    }
    .restanurant-addr::before {
      width: (0.38rem);
      background-image: url('/app2/img/address.png');
    }
    .restanurant-send-time::before {
      background-image: url('/app2/img/time.png');
    }
    .restanurant-send-type::before {
      background-image: url('/app2/img/info.png');
    }
    .addr-wrap {
      display: flex;
    }
    .addr-text {
      flex: 1;
      line-height: (0.4rem);
      margin-top: (0.06rem);
    }
    .meituan-send {
      background-color: #ffd161;
      color: #333;
      font-size: (10px);
      padding: (0.04rem);
      border-radius: 0.08rem;
      margin-right: (0.08rem);
    }
    .restanurant-pay-type::before {
      display: none;
    }
    .icon {
      width: (0.34rem);
      height: (0.34rem);
      margin-right: (0.4rem);
    }
  }
</style>
